<template>
	<div id="playlists">
		<!-- 头部歌单 -->
		<div id="jpgd">
			<!-- 封面 -->
			<img :src="topList.coverImgUrl">
			<div class="text">
				<button type="button">精品歌单</button>
				<!-- 标题 -->
				<h3>{{topList.name}}</h3>
				<!-- 介绍 -->
				<div id="p">
					{{topList.description}}
				</div>

			</div>
		</div>
		<!-- 导航栏列表 -->
		<div id="playlist">
			<ul>
				<li class="item" :class="{active:tag=='全部'}" @click="tag='全部'">全部</li>
				<li class="item" :class="{active:tag=='欧美'}" @click="tag='欧美'">欧美</li>
				<li class="item" :class="{active:tag=='华语'}" @click="tag='华语'">华语</li>
				<li class="item" :class="{active:tag=='流行'}" @click="tag='流行'">流行</li>
				<li class="item" :class="{active:tag=='说唱'}" @click="tag='说唱'">说唱</li>
				<li class="item" :class="{active:tag=='摇滚'}" @click="tag='摇滚'">摇滚</li>
				<li class="item" :class="{active:tag=='民谣'}" @click="tag='民谣'">民谣</li>
				<li class="item" :class="{active:tag=='电子'}" @click="tag='电子'">电子</li>
				<li class="item" :class="{active:tag=='轻音乐'}" @click="tag='轻音乐'">轻音乐</li>
				<li class="item" :class="{active:tag=='影视原声'}" @click="tag='影视原声'">影视原声</li>
				<li class="item" :class="{active:tag=='ACG'}" @click="tag='ACG'">ACG</li>
				<li class="item" :class="{active:tag=='怀旧'}" @click="tag='怀旧'">怀旧</li>
				<li class="item" :class="{active:tag=='治愈'}" @click="tag='治愈'">治愈</li>
				<li class="item" :class="{active:tag=='旅行'}" @click="tag='旅行'">旅行</li>
			</ul>
			<div id="nav" v-for="(item,index) in list" :key="index">
				<!-- 播放数量 -->
				<!-- 				<span>{{item.plapyCount}}</span>
 -->
				<div class="imgs">
					<img :src="item.coverImgUrl">
					<p>{{item.name}}</p>
				</div>
			</div>
		</div>
		<!-- 数据分页 
			total 总条数
			current-page 当前页
			page-size  每页多少条数据
			current-change  页码改变事件
		-->
		<div id="page">
			<el-pagination background @current-change="handleCurrentChange(page)" 
				layout="prev, pager, next" :total="total" class="pages" :current-page="page" :page-size="10">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	/* 导入axios */
	import axios from 'axios'
	export default {
		name: 'PlayLists',
		data() {
			return {
				//顶部的推荐歌单
				topList: {},
				//歌单列表
				list: [],
				//导航栏 默认选择为全部
				tag: "全部",
				//总页数
				total: 0,
				//页码
				page: 1,
				
			}
		},
		//侦听事件watch
		watch: {
			tag() {
				//头部数据
				this.topData()
				//歌单列表
				this.listData()
				//修改页码为1                     
				this.page = 1
			}
		},
		methods: {
			//页码改变事件
			handleCurrentChange(val) {
				//保存页码
				this.page = val
				//歌单列表
				this.listData()




			},
			//头部数据
			topData() {
				axios({
					url: 'https://autumnfish.cn/top/playlist/highquality',
					method: 'get',
					params: {
						limit: 1,
						cat: this.tag
					}
				}).then(res => {
					this.topList = res.data.playlists[0]
				})
			},
			//列表数据  
			listData() {
				axios({
					url: 'https://autumnfish.cn/top/playlist/',
					method: 'get',
					params: {
						limit: 10,
						//起始的值  （页码-1）*每页多少条数据
						offset: (this.page - 1) * 10,
						cat: this.tag
					}
				}).then(res => {
					//列表数据总条数
					this.total = res.data.total
					this.list = res.data.playlists
				})
			}
		},
		created() {
			//头部数据
			this.topData()
			//歌单列表
			this.listData()
		}
	}
</script>

<style scoped="scoped">
	.pages {
		margin-top: 730px;
	}

	#page .pages {
		text-align: center;
	}

	.active {
		color: red;
	}

	.imgs {
		margin-left: 10px;
		padding-left: 40px;
		float: left;
		height: 350px;
	}

	.imgs p {
		color: black;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		width: 150px;
	}

	.imgs img {
		width: 200px;
		height: 200px;
	}

	#nav {
		width: 1300px;
	}

	#playlist ul li {
		list-style: none;
		float: left;
		padding-left: 16px;
		cursor: pointer;
	}

	#playlist ul {
		width: 1500px;
		height: 60px;
	}

	#jpgd {
		margin-top: 10px;
		background-color: darkslategrey;
		width: 1500px;
		height: 350px;
	}

	#jpgd img {
		float: left;
		width: 200px;
		height: 200px;
		padding-top: 50px;
	}

	#jpgd .text {
		color: beige;
		float: left;
		margin-left: 40px;
		padding-top: 20px;

	}

	#p {
		overflow: hidden;


		/* 溢出内容隐藏 */
		width: 1000px;
		height: 200px;

	}

	button {
		color: #CF9236;
	}
</style>
